<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苗族银饰精品系列 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            padding-bottom: 80px;
        }
        .header {
            background-color: white;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .back-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        .swiper-container {
            position: relative;
            width: 100%;
            height: 300px;
            overflow: hidden;
        }
        .swiper-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .swiper-slide.active {
            opacity: 1;
        }
        .swiper-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .swiper-pagination {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 8px;
        }
        .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }
        .swiper-pagination-bullet.active {
            background-color: white;
            width: 16px;
            border-radius: 4px;
        }
        .price-tag {
            color: #e53e3e;
            font-size: 24px;
            font-weight: bold;
        }
        .original-price {
            color: #a0aec0;
            text-decoration: line-through;
            font-size: 14px;
            margin-left: 8px;
        }
        .tag {
            background-color: rgba(0,82,217,0.1);
            color: #0052d9;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 12px;
            margin-right: 6px;
            display: inline-block;
        }
        .section-title {
            font-size: 16px;
            font-weight: bold;
            margin: 16px 0 8px;
            color: #333;
            position: relative;
            padding-left: 12px;
        }
        .section-title:before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 4px;
            background-color: #0052d9;
            border-radius: 2px;
        }
        .spec-item {
            display: inline-block;
            margin: 0 8px 8px 0;
            padding: 6px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            font-size: 14px;
            color: #4a5568;
            background-color: white;
        }
        .spec-item.selected {
            color: #0052d9;
            border-color: #0052d9;
            background-color: rgba(0,82,217,0.05);
        }
        .bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            display: flex;
            padding: 10px 16px;
            box-shadow: 0 -1px 5px rgba(0,0,0,0.05);
        }
        .action-btn {
            flex: 1;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        .cart-btn {
            background-color: #fff0e5;
            color: #ff7d00;
            margin-right: 10px;
        }
        .buy-btn {
            background-color: #0052d9;
            color: white;
        }
        .craftsman-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .video-preview {
            width: 100%;
            height: 180px;
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        .video-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.8;
        }
        .play-icon {
            position: absolute;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .play-icon svg {
            width: 24px;
            height: 24px;
            fill: white;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header px-4 py-3 flex items-center">
        <div class="back-btn" onclick="history.back()">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
        </div>
        <div class="flex-1 text-center font-medium">商品详情</div>
        <div class="w-8 h-8 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
            </svg>
        </div>
    </div>
    
    <!-- 商品轮播图 -->
    <div class="swiper-container">
        <div class="swiper-slide active">
            <img src="https://images.unsplash.com/photo-1551524559-8af4e6624178" class="swiper-image" alt="苗族银饰项链">
        </div>
        <div class="swiper-slide">
            <img src="https://images.unsplash.com/photo-1596944924616-7b38e7cfac36" class="swiper-image" alt="苗族银饰手镯">
        </div>
        <div class="swiper-slide">
            <img src="https://images.unsplash.com/photo-1611652022419-a9419f74343d" class="swiper-image" alt="苗族银饰耳环">
        </div>
        <div class="swiper-pagination">
            <div class="swiper-pagination-bullet active"></div>
            <div class="swiper-pagination-bullet"></div>
            <div class="swiper-pagination-bullet"></div>
        </div>
    </div>
    
    <!-- 商品信息 -->
    <div class="bg-white p-4">
        <div class="flex items-center">
            <span class="price-tag">¥1,288</span>
            <span class="original-price">¥1,588</span>
        </div>
        <h1 class="text-xl font-bold mt-2">贵州苗族银饰精品系列 - 传统手工项链</h1>
        <div class="flex mt-2">
            <span class="tag">非遗产品</span>
            <span class="tag">限量发售</span>
            <span class="tag">手工制作</span>
        </div>
        <div class="flex justify-between items-center mt-3 text-sm text-gray-500">
            <div>销量: 328件</div>
            <div>黔东南州 · 凯里市</div>
        </div>
    </div>
    
    <!-- 优惠信息 -->
    <div class="bg-white mt-2 p-4">
        <div class="flex items-center justify-between">
            <div class="text-sm">
                <span class="text-red-500 border border-red-500 px-1 rounded mr-2">优惠</span>
                <span>新人首单立减100元</span>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-400">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
        </div>
    </div>
    
    <!-- 规格选择 -->
    <div class="bg-white mt-2 p-4">
        <div class="section-title">规格选择</div>
        <div class="mt-2">
            <div class="text-sm text-gray-600 mb-2">款式</div>
            <div>
                <span class="spec-item selected">龙凤呈祥</span>
                <span class="spec-item">百鸟朝凤</span>
                <span class="spec-item">花开富贵</span>
            </div>
        </div>
        <div class="mt-3">
            <div class="text-sm text-gray-600 mb-2">材质</div>
            <div>
                <span class="spec-item selected">999足银</span>
                <span class="spec-item">925银</span>
            </div>
        </div>
        <div class="mt-3">
            <div class="text-sm text-gray-600 mb-2">长度</div>
            <div>
                <span class="spec-item selected">45cm</span>
                <span class="spec-item">50cm</span>
                <span class="spec-item">55cm</span>
            </div>
        </div>
    </div>
    
    <!-- 工艺介绍 -->
    <div class="bg-white mt-2 p-4">
        <div class="section-title">工艺介绍</div>
        <p class="text-sm text-gray-600 leading-relaxed">
            苗族银饰制作工艺历史悠久，已有上千年历史，是中国国家级非物质文化遗产。本系列银饰采用传统手工锻造、錾刻、镂空等技艺精心打造，每一件作品都由非遗传承人亲自设计并监制，确保作品的艺术价值和文化内涵。
        </p>
        <div class="flex items-center mt-4">
            <img src="https://images.unsplash.com/photo-1566492031773-4f4e44671857" class="craftsman-avatar" alt="工艺师">
            <div class="ml-3">
                <div class="font-medium">杨明辉 · 苗族银饰非遗传承人</div>
                <div class="text-xs text-gray-500 mt-1">从艺40余年，作品曾获国家级银饰工艺大赛金奖</div>
            </div>
        </div>
    </div>
    
    <!-- 视频展示 -->
    <div class="bg-white mt-2 p-4">
        <div class="section-title">制作工艺视频</div>
        <div class="video-preview mt-3">
            <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d" alt="工艺视频预览">
            <div class="play-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
                    <path d="M8 5v14l11-7z" />
                </svg>
            </div>
        </div>
    </div>
    
    <!-- 文化背景 -->
    <div class="bg-white mt-2 p-4">
        <div class="section-title">文化背景</div>
        <p class="text-sm text-gray-600 leading-relaxed">
            苗族银饰不仅是装饰品，更是苗族文化的重要载体。在苗族传统中，银饰象征着财富和地位，也承载着祈福辟邪的美好寓意。不同图案的银饰有着不同的文化内涵：龙凤呈祥代表吉祥如意，百鸟朝凤象征和谐美满，花开富贵寓意富贵吉祥。
        </p>
        <div class="grid grid-cols-3 gap-2 mt-3">
            <img src="https://images.unsplash.com/photo-1624861861047-e4dbc62555e7" class="w-full h-20 object-cover rounded" alt="苗族文化">
            <img src="https://images.unsplash.com/photo-1626248801379-51a0748a5f96" class="w-full h-20 object-cover rounded" alt="苗族文化">
            <img src="https://images.unsplash.com/photo-1626164717484-d365e7a9dfaa" class="w-full h-20 object-cover rounded" alt="苗族文化">
        </div>
    </div>
    
    <!-- 商品参数 -->
    <div class="bg-white mt-2 p-4">
        <div class="section-title">商品参数</div>
        <div class="grid grid-cols-2 gap-y-3 mt-2">
            <div class="text-sm">
                <span class="text-gray-500">品牌：</span>
                <span>贵州苗银</span>
            </div>
            <div class="text-sm">
                <span class="text-gray-500">材质：</span>
                <span>999足银</span>
            </div>
            <div class="text-sm">
                <span class="text-gray-500">重量：</span>
                <span>约30-50克</span>
            </div>
            <div class="text-sm">
                <span class="text-gray-500">产地：</span>
                <span>贵州省黔东南州</span>
            </div>
            <div class="text-sm">
                <span class="text-gray-500">工艺：</span>
                <span>手工锻造</span>
            </div>
            <div class="text-sm">
                <span class="text-gray-500">证书：</span>
                <span>非遗产品证书</span>
            </div>
        </div>
    </div>
    
    <!-- 用户评价 -->
    <div class="bg-white mt-2 p-4">
        <div class="flex justify-between items-center">
            <div class="section-title">用户评价(328)</div>
            <div class="text-sm text-blue-600">查看全部 ></div>
        </div>
        <div class="mt-3">
            <div class="flex items-center">
                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80" class="w-8 h-8 rounded-full" alt="用户头像">
                <span class="ml-2">王**</span>
            </div>
            <div class="text-sm text-gray-600 mt-2">
                收到货非常惊艳，做工精细，银的成色很好，图案很有民族特色，戴上很有气质。包装也很精美，送人自用两相宜。
            </div>
            <div class="flex mt-2">
                <img src="https://images.unsplash.com/photo-1611652022419-a9419f74343d" class="w-16 h-16 object-cover rounded mr-2" alt="用户晒图">
                <img src="https://images.unsplash.com/photo-1596944924616-7b38e7cfac36" class="w-16 h-16 object-cover rounded" alt="用户晒图">
            </div>
            <div class="text-xs text-gray-400 mt-2">2023-05-10</div>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-100">
            <div class="flex items-center">
                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2" class="w-8 h-8 rounded-full" alt="用户头像">
                <span class="ml-2">李**</span>
            </div>
            <div class="text-sm text-gray-600 mt-2">
                作为一个苗族银饰收藏爱好者，这款项链的工艺和设计都很正宗，能看出是真正的非遗传承人作品，很满意这次购买。
            </div>
            <div class="text-xs text-gray-400 mt-2">2023-04-28</div>
        </div>
    </div>
    
    <!-- 相关推荐 -->
    <div class="bg-white mt-2 p-4">
        <div class="section-title">相关推荐</div>
        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="bg-gray-50 rounded-lg p-2">
                <img src="https://images.unsplash.com/photo-1611652022419-a9419f74343d" class="w-full h-28 object-cover rounded-lg" alt="苗族手镯">
                <div class="mt-2 text-sm font-medium">苗族传统手工银手镯</div>
                <div class="text-red-500 text-sm mt-1">¥688</div>
            </div>
            <div class="bg-gray-50 rounded-lg p-2">
                <img src="https://images.unsplash.com/photo-1535632787350-4e68ef0ac584" class="w-full h-28 object-cover rounded-lg" alt="苗族耳环">
                <div class="mt-2 text-sm font-medium">苗族蝴蝶图案银耳环</div>
                <div class="text-red-500 text-sm mt-1">¥488</div>
            </div>
        </div>
    </div>
    
    <!-- 底部操作栏 -->
    <div class="bottom-bar">
        <div class="flex items-center mr-3">
            <div class="flex flex-col items-center mr-5">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-gray-500">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="text-xs text-gray-500">客服</span>
            </div>
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-gray-500">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
                <span class="text-xs text-gray-500">收藏</span>
            </div>
        </div>
        <button class="action-btn cart-btn">加入购物车</button>
        <button class="action-btn buy-btn">立即购买</button>
    </div>
    
    <script>
        // 简单的轮播图逻辑
        const slides = document.querySelectorAll('.swiper-slide');
        const bullets = document.querySelectorAll('.swiper-pagination-bullet');
        let currentIndex = 0;
        
        function showSlide(index) {
            slides.forEach(slide => slide.classList.remove('active'));
            bullets.forEach(bullet => bullet.classList.remove('active'));
            
            slides[index].classList.add('active');
            bullets[index].classList.add('active');
        }
        
        bullets.forEach((bullet, index) => {
            bullet.addEventListener('click', () => {
                currentIndex = index;
                showSlide(currentIndex);
            });
        });
        
        // 自动轮播
        setInterval(() => {
            currentIndex = (currentIndex + 1) % slides.length;
            showSlide(currentIndex);
        }, 3000);
    </script>
</body>
</html> 